<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入jquery.js-->
    <script type="text/javascript" th:src="@{/static/js/jquery-3.5.1.js}"></script>
    <!--引入样式-->
    <link rel="stylesheet" th:href="@{/static/bootstrap/bootstrap.css}">
    <!--引入bootstrap.js文件-->
    <script type="text/javascript" th:src="@{/static/bootstrap/bootstrap.js}"></script>
</head>
<body>
<!--修改员工模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body" id="emp_update">
                <form class="form-horizontal" id="emp_update_form">
                    <div class="form-group">
                        <label for="empName_input" class="col-sm-2 control-label">员工名字</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_input" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="email_update_input" name="email" placeholder="email">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="gender_input">
                                <input type="radio" name="gender" value="x"> 男
                            </label>
                            <label class="gender_input">
                                <input type="radio" name="gender" value="o" checked="checked"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="dId" id="dept_update_select">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">提交</button>
            </div>
        </div>
    </div>
</div>
<!--添加员工模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body" id="emp_add">
                <form class="form-horizontal" id="emp_form">
                    <div class="form-group">
                        <label for="empName_input" class="col-sm-2 control-label">员工名字</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="empName_input" name="empName" placeholder="名字">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_input" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="email_input" name="email" placeholder="email">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="gender_input">
                                <input type="radio" name="gender" id="emp_add_gender1" value="x"> 男
                            </label>
                            <label class="gender_input">
                                <input type="radio" name="gender" id="emp_add_gender2" value="o" checked="checked"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="dId" id="dept_add_select">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">提交</button>
            </div>
        </div>
    </div>
</div>
<!--搭建页面显示-->
<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-md-12">
            <h1>ssm-crud</h1>
        </div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-md-1 col-md-offset-9">
            <button class="btn btn-primary glyphicon glyphicon-plus" id="emp_add_model">新增</button>
        </div>
        <div class="col-md-2">
            <button class="btn btn-warning glyphicon glyphicon-trash" id="emp_delete_all_btn">删除</button>
        </div>
    </div>
    <!--显示表格数据-->
    <div class="row">
        <div class="col-md-12">
            <table class="table .table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check_all"/>
                        </th>
                        <th>id</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>部门</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <!--显示分页信息-->
    <div class="row">
        <!--分页文字信息-->
        <div class="col-md-6" id="page_info_area"></div>
        <!--分页条信息-->
        <div class="col-md-6" id="page_nav_area"></div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    //1、页面加载完成之后，直接发送一个ajax请求，要到分页
    var basePath = [[${#httpServletRequest.getContextPath()}]];
    //先获取到项目路径（相当于jsp里面的“requestScope.getContextPath()”）
    var pages;//总共几页
    var pageNum=1;//当前在第几页
    var pageSize;
    $(function () {
        var arr1 = document.cookie.split('; ');
        for(var i=0;i<arr1.length;i++){
            //将每一对值分解成一个只有“名”和“值”的一个数组
            var arr2=arr1[i].split('=');
            if(arr2[0]=='pn'&&arr2[1]!=null){
                pageNum=arr2[1];
            }
        };
        to_page(pageNum);
    });
    //发送ajax请求跳转页面的函数
    function to_page(pn) {
        $("#check_all").prop("checked",false);
        $.ajax({
            url:basePath+"/emps",
            //url:发送请求的路径
            data:"pn="+pn,
            //data:发送请求的参数
            type:"get",
            //type:发送请求的类型
            success:function (result) {
                //如果请求发送成功的话执行的函数(形参result映射的是返回数据)
                //1、解析并显示员工数据
                build_emps_table(result);
                //2、解析并显示分页数据
                build_page_info(result);
                //3、解析显示分页条
                bulid_page_nav(result);
            }
        });
    }
    //解析数据库数据并展示的函数
    function build_emps_table(result) {
        $("#emps_table tbody").empty();
        //先清空原来的数据
        var emps=result.extend.pageInfo.list;
        $.each(emps,function (index,item) {
        //遍历元素，参数列表第一个参数是元素的下标，第二个参数是元素的值
            var checkBoxTd=$("<td><input type='checkbox' class='check_item'></td>")
            var empIdTd=$("<td></td>").append(item.empId);
            //append:将什么元素添加到什么标签里面
            var empNameTd=$("<td></td>").append(item.empName);
            var genderTd=$("<td></td>").append(item.gender=="x"?"男":"女");
            // javascript中的function函数中使用三元运算
            var emailTd=$("<td></td>").append(item.email);
            var empDeptTd=$("<td></td>").append(item.department.deptName);
            /*为修改和删除按钮添加一个自定义属性，来表示当前员工的id*/
            var editBtn=$("<button></button>").addClass("btn btn-info glyphicon glyphicon-pencil btn-xs edit_btn").append("修改");
            editBtn.attr("empId",item.empId);
            //appendClass:将Class属性添加到标签里面
            var delBtn=$("<button></button>").addClass("btn btn-warning glyphicon glyphicon-trash btn-xs delete_btn").append("删除");
            delBtn.attr("empId",item.empId);
            var btnTd=$("<td></td>").append(editBtn).append(" ").append(delBtn);
            $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd).append(empNameTd)
                .append(genderTd).append(emailTd)
                .append(empDeptTd).append(btnTd)
                .appendTo("#emps_table tbody");
            /*a.appendTo(b)：把a插到b的所有子元素的末尾，
            成为最后一个子元素【b可以是直接就有的，也可以是
            根据自己的条件自己查的】【如果a是原来就有的，
            那相当于元素转移，原来地方的a就没了。如果a是新建的，
            则a可以直接写成 $("新 元素代码") 】
             */
        })
    }
    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        //先清空原来的数据
        $("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页，总共"+result.extend.pageInfo.pages+"页，共"+result.extend.pageInfo.total+"条记录；");
        pages=result.extend.pageInfo.pages;
        pageNum=result.extend.pageInfo.pageNum;
        pageSize=result.extend.pageInfo.size;
    }
    //解析显示分页条
    function bulid_page_nav(result){
        $("#page_nav_area").empty();
        //先清空原来的数据
        var ul=$("<ul></ul>").addClass("pagination");
        var firstPageLi=$("<li></li>").append($("<a></a>").append("首页"));
        firstPageLi.click(function () {
           to_page(1);
        });
        //首页
        var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;"));
        prePageLi.click(function () {
            to_page(result.extend.pageInfo.pageNum-1);
        });
        //上一页
        if(result.extend.pageInfo.hasPreviousPage==false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled")
        }//判断是否有上一页
        ul.append(firstPageLi).append(prePageLi);
        //添加首页和上一页
        $.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
            var numLi=$("<li></li>").append($("<a></a>").append(item));
            if(result.extend.pageInfo.pageNum==item){
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);//添加中间导航页
        });
        //中间导航页
        var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;"));
        nextPageLi.click(function () {
            to_page(result.extend.pageInfo.pageNum+1);
        });
        //下一页
        var lastPageLi=$("<li></li>").append($("<a></a>").append("尾页"));
        lastPageLi.click(function () {
            to_page(result.extend.pageInfo.pages);
        });
        //尾页
        if(result.extend.pageInfo.hasNextPage==false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }//判断是否有下一页
        ul.append(nextPageLi).append(lastPageLi);
        //添加下一页和尾页
        var navEle=$("<nav></nav>").append(ul).appendTo("#page_nav_area");
    }
    // 模态框触发事件,点击新增按钮弹出模态框
    $("#emp_add_model").click(function () {
        //开启模态框前先清空原来的数据
        // $("#empName_input").val('');
        // $("#email_input").val('');
        $("#emp_form")[0].reset();//ajax使用表单重置
        $("#empName_input").parent().removeClass("has-success has-error");
        $("#empName_input").next("span").text("");
        $("#email_input").parent().removeClass("has-success has-error");
        $("#email_input").next("span").text("");
        //发出ajax请求查出部门信息
        getDepts("#dept_add_select");
        //弹出模态框
        $("#empAddModal").modal();
    });
    //发送ajax请求查询部门信息
    function getDepts(ele) {
        $(ele).empty();
        $.ajax({
            url:basePath+"/depts",
            async:false,
            type:"get",
            success:function (result) {
                $.each(result.extend.depts,function (index,item) {
                    var opts=$("<option></option>").append(item.deptName).attr("value",item.deptId);
                    opts.appendTo(ele);
                })
            }
        });
    }
    //添加员工提交信息点击事件
    $("#emp_save_btn").click(function () {
        //1.先对要提交给服务器的数据进行校验
        if(!validata_add_form()){
            return false;
        };
        //2.发送ajax请求保存员工
        $.ajax({
            url:basePath+"/emp",
            data:$("#emp_form").serialize(),
            // $("#emp_form").serialize():将该表单的数据序列化，用于ajax请求；
            type:"post",
            success:function (result) {
                if(result.code==200){//保存失败则显示失败信息
                    if(undefined!=result.extend.errorFields.email){
                        //显示邮箱错误信息
                        show_validate_msg("#email_input","error",result.extend.errorFields.email);
                    }
                    if(undefined!=result.extend.errorFields.empName){
                        //显示员工名字错误信息
                        show_validate_msg("#empName_input","error",result.extend.errorFields.empName);
                    }
                    return;
                }
                //员工保存成功后
                //1、关闭模态框
                $('#empAddModal').modal('hide');
                //2、发送ajax请求，显示最后一页
                to_page(pages+1);
            }
        });
    });
    //添加栏填写失去焦点后校验事件
    $("#empName_input").blur(function () {
        checkName();
    });
    $("#email_input").blur(function () {
        checkEmail("#email_input");
    });
    function validata_add_form() {
        var T=true;
        if(!checkName()){
            T= false;
        }
        if(!checkEmail("#email_input")){
            T= false;
        }
        return T;
    }
    function checkName() {
        //1.拿到要校验的数据，使用正则表达式
        var empName=$("#empName_input").val();
        var regName=/(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,16})/;
        if(!regName.test(empName)){
            show_validate_msg("#empName_input","error","名字格式错误，格式可以是3-16位字母大小写，数字，_,-;也可以是2-16字的中文");
            return false;
        }
        var t=true;
        $.ajax({
            async:false,
            url:basePath+"/checkName",
            data:"name="+empName,
            type:"get",
            success:function (result) {
                if(result.code==100){
                    show_validate_msg("#empName_input","error","名字已被占用!");
                    t = false;
                }
            }
        });
        if(t==false){
            return false;
        }
        show_validate_msg("#empName_input","success","");
        return true;
    }
    function checkEmail(ele) {
        //1.拿到要校验的数据，使用正则表达式
        var email=$(ele).val();
        var  regEmail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(email)){
            show_validate_msg(ele,"error","邮箱书写格式错误");
            return false;
        }else {
            show_validate_msg(ele,"success","");
            return true;
        }
    }
    function show_validate_msg(ele,status,msg) {
        //首先清空当前元素的状态
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if(status=="success"){
            $(ele).parent().addClass("has-success");
        }else if (status=="error"){
            $(ele).parent().addClass("has-error");
        }
        $(ele).next("span").text(msg);
    }
    /*因为修改和单个删除按钮是在ajax请求传回数据之前就绑定的，所以绑不上
    所以用普通click点击事件是没有效果的，因为ajax传回数据显示是在最后完成的*/
    /*live():jquery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
    这里就可以使用live()方法,但新版本jquery删去了live,转而用on方法代替，但on方法的用法比较奇怪*/
    /*  $(参数0).on("参数1","参数2",function () {xxx});
        参数0：要绑定事件的元素的前辈元素，即要绑定事件的元素是它的后代元素；
        参数1：要绑定的事件；
        参数2：要绑定的元素；*/
    // 点击弹出修改模态框
    $(document).on("click",".edit_btn",function () {
        //0、先清空原来的数据
        $("#emp_update_form")[0].reset();//ajax使用表单重置
        $("#empName_update_static").parent().removeClass("has-success has-error");
        $("#email_update_input").parent().removeClass("has-success has-error");
        $("#email_update_input").next("span").text("");
        //1、查出部门信息，并显示部门列表
        getDepts("#dept_update_select");
        //2、查出员工信息，显示员工信息
        getEmp($(this).attr("empId"));
        //2.5、将要修改的员工的id值传到模态框的提交按钮上
        $("#emp_update_btn").attr("empId",$(this).attr("empId"));
        //3、弹出模态框
        $("#empUpdateModal").modal();
    });
    //根据id得到员工信息
    function getEmp(id) {
        $.ajax({
            url:basePath+"/emp/"+id,
            type:"get",
            success:function (result) {
                var emp=result.extend.emp;
                $("#empName_update_static").text(emp.empName);
                $("#email_update_input").val(emp.email);
                $("#empUpdateModal input[name=gender]").val([emp.gender]);
                $("#empUpdateModal select").val([emp.dId]);
            }
        });
    }
    //为修改模态框添加失去焦点事件
    $("#email_update_input").blur(function () {
        checkEmail("#email_update_input");
    });
    //点击更新，更新员工信息
    $("#emp_update_btn").click(function () {
        //1、首先验证邮箱是否合法
        if(!checkEmail("#email_update_input")){
            return false;
        }
        //2、发送ajax请求保存更新的数据
        $.ajax({
            url:basePath+"/emp/"+$(this).attr("empId"),
            type:"put",
            //ajax可以直接发送put请求(不用再设置_method属性为put)
            data:$("#emp_update_form").serialize(),
            success:function (result) {
                to_page(pageNum);
                //1、关闭模态框
                $('#empUpdateModal').modal('hide');
            }
        });
    });
    //删除单个员工
    $(document).on("click",".delete_btn",function () {
        //1、弹出确认删除对话框
        var empName=$(this).parents("tr").find("td:eq(2)").text();
        //找到父元素tr的第二个td子元素
        if(confirm("确认删除员工”"+empName+"“吗？")){
            var empId = $(this).attr("empId");
            //确认删除则直接发送ajax请求
            $.ajax({
                url:basePath+"/emp/"+empId,
                type:"delete",
                success:function (result) {
                    alert(result.msg);
                    to_page(pageNum);
                }
            });
        }
    });
    //全选|全不选功能
    $("#check_all").click(function () {
        var t=$(this).prop("checked");
        $(".check_item").prop("checked",t);
    });
    //单选选满后全选自动选上，选不满全选不选上
    $(document).on("click",".check_item",function () {
        // alert(pageSize+" "+$(".check_item:checked").length);
        var flag=pageSize==$(".check_item:checked").length;
        $("#check_all").prop("checked",flag);

    });
    //批量删除事件
    $("#emp_delete_all_btn").click(function () {
        var empNames='';
        var empIds='';
        $.each($(".check_item:checked"),function () {
           empNames+= $(this).parents("tr").find("td:eq(2)").text()+",";
           empIds+= $(this).parents("tr").find("td:eq(1)").text()+"-";
        });
        if(empNames.length==0){return;}
        empNames=empNames.substring(0,empNames.length-1);
        empIds=empIds.substring(0,empIds.length-1);
        //把empNames最后的逗号删除
        if(confirm("确认删除【"+empNames+"】吗?")){
            //发送ajax批量删除
            $.ajax({
                url:basePath+"/emp/"+empIds,
                type:"delete",
                success:function (result) {
                    alert("删除成功");
                    to_page(pageNum);
                }
            });
        }
    });
</script>
</body>
</html>